<template>
  <div class="header">
    <Row class="header1">
      <Col span="16">
      <span>养老机构等级划分及评定中心</span>
      <Button class="btnhome" style="padding:0px 6px; background:transparent; color:#fff" shape="circle" size="small" @click="toHome"> 返回首页</Button>
      </Col>
      <Col class="user_name" span="8">
      <span @click="toUser"> 欢迎你 {{userInfo.userName}}</span> <a><span class="user_logout" type="text" @click="logout"> 【注销】</span></a>
      </Col>
    </Row>

    <Row v-if="title==='个人中心'" class="header_user">
      <Col>
      <div class="user_zh">{{title}}</div>
      <div class="user_en">
        <Breadcrumb separator=">">
          <Breadcrumb-item style="color:#fff" v-for="item in titleDes" v-bind:key="item.index" :to="item.link">{{item.title}}</Breadcrumb-item>
        </Breadcrumb>
      </div>
      </Col>
    </Row>
    <Row v-else-if="title!==''" class="header_othter">
      <Col>
      <div class="othter_zh">{{title}}</div>
      <div class="othter_en">
        <Breadcrumb separator=">">
          <Breadcrumb-item style="color:#888; font-size:1rem" v-for="item in titleDes" v-bind:key="item.index" :to="item.link">{{item.title}}</Breadcrumb-item>
        </Breadcrumb>
      </div>
      </Col>
    </Row>
  </div>
</template>

<script>
// @ is an alias to /src
import { Component, Vue, Prop } from 'vue-property-decorator'

@Component
export default class Header extends Vue {
  @Prop({ type: String, default: '' }) title
  @Prop({ type: Array, default: () => { return [{ title: '', link: '' }] } }) titleDes

  get userInfo() {
    // console.log('token', this.$store.getters)
    return this.$store.getters['session/user']
  }

  toUser() {
    this.$router.push('../User')
  }

  toHome() {
    this.$router.push('../Home')
  }

  logout() {
    this.$store.commit('session/logout')

    this.$router.push('../')
    this.$router.go()
  }
}
</script>
<style scoped>
.header {
  text-align: left;
  font-size: 1.2rem;
  line-height: 1.2rem;
}
.header1 {
  color: #fff;
  background: #00b04e;
  padding: 0.5rem 10% 0.5rem 20%;
}
.header_user,
.header_othter {
  padding: 1rem 10% 1rem 20%;
}
.header_user {
  color: #fff;
  background: #00b04e;
}
.btnhome {
  margin-left: 2rem;
  font-size: 1.2rem;
}
.user_zh,
.othter_zh {
  margin-top: 1rem;
  height: 1.8rem;
  font-size: 1.8rem;
  font-weight: 800;
}
.user_en {
  padding: 0.2rem 0 0 0;
  font-size: 1.8rem;
}
.othter_en {
  padding: 1rem 0 0 0;
  font-size: 1rem;
}
.user_name {
  line-height: 20px;
  text-align: right;
}
.user_logout {
  color: #fff;
  margin-left: 1rem;
  padding: 0;
  display: inline;
}
</style>
